@mixin menu_column {
	cursor: pointer;
	width: 100%;
	display: inline-flex;
	align-items: center;
	align-content: center;
	justify-content: space-between;
	padding: px2rem(8px) px2rem(11px);
	color: $color-gradually-gray-11;
	font-size: $body-font-size;
	> i {
		margin-right: px2rem(6px);
	}
	> span {
		line-height: px2rem(15px);
	}
	&:active {
		@include btn_active;
	}
}

.header_side-bar {
	&_top {
		position: relative;
		height: px2rem(165px);
		background: $default-background-color;
		&-cover {
			position: absolute;
			width: 100%;
			height: 100%;
		}
		&-info {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			padding: px2rem(55px) 0 0 px2rem(11px);
			&_nickname {
				font-size: px2rem(19px);
				line-height: px2rem(24px);
				font-weight: 700;
				color: $default-background-color;
				text-shadow: 1px 1px set-color($default-background-color);
			}
			&_motto {
				width: 60%;
				font-size: px2rem(12px);
				line-height: px2rem(14px);
				color: $default-background-color;
				text-shadow: 1px 1px set-color($default-background-color);
			}
		}
	}
	&_content {
		&-menu {
			user-select: none;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: $default-header-background-color;
			border-bottom: 1px solid $default-header-border-color;

			&_column {
				width: 100%;
				&-title {
					@include menu_column;
					>a {
						font-size: px2rem(6px);
						display: inline-flex;
						margin-left: auto;
					}
				}
				&-tag {
					padding: px2rem(1px) px2rem(11px) px2rem(11px) px2rem(11px);
					border-top: 1px dashed $default-header-border-color;
					div {
						&:active {
							@include btn_active;
						}
					}
					&_active {
						span {
							a {
								color: $default-link-hover-color;
							}
						}
					}
				}
			}
			&_btn {
				@include menu_column;
				display: inline-flex;
				align-items: center;
				align-content: center;
				font-size: $body-font-size;
				> span {
					margin-right: auto;
				}
			}
		}
		&-active {
			span {
				color: $default-link-hover-color;
			}
		}
	}
	&_bottom {
		cursor: pointer;
		user-select: none;
		width: px2rem(168px);
		color: $default-info-color;
		font-size: px2rem(13px);
		margin: px2rem(18px) auto;
		text-align: center;
		line-height: px2rem(31px);
		border: 1px solid $default-border-color;
		border-radius: px2rem(2px);
		&:active {
			@include btn_active;
			color: $color-gradually-gray-11;
		}
	}
}
